<script setup lang="ts">
// 模块引入
import { ElMessage } from 'element-plus';
import { ref, computed } from 'vue';
import { startRequest, RequestPath } from '../base/RequestWork'
// 定义属性
let cover = ref("")     // 封面
let name = ref("")      // 名称
let content = ref("")   // 内容
let uri = ref("")       // 落地页
let status = ref("禁用") // 状态
// 计算属性，控制创建按钮的禁用状态
let disableCheak = computed(()=>{
    return !(cover.value.length > 0 && name.value.length > 0 && content.value.length > 0 && uri.value.length > 0)
})
// 上传成功的回调方法
function uploadImageSuccess(data:any) {
    ElMessage.success({
        message: '图片添加成功'
    })
    cover.value = data.url    
}
// 上传失败的回调方法
function uploadImageError() {
    ElMessage.error({
        message: '图片添加失败，请重试'
    })
}
// 删除了上传的文件的回调方法
function uploadImageRemove() {
    cover.value = ""
}
// 创建运营位方法
function create() {
    // 发起创建运营位接口
    startRequest(RequestPath.operationalAdd, "post", {
        name: name.value,
        content: content.value,
        cover: cover.value,
        status: status.value == '禁用' ? 0 : 1,
        uri: uri.value
    }).then(()=>{
        ElMessage.success({
            message: '创建成功，请到运营位管理页面查看'
        })
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}
</script>

<template>
    <div class="contentContainer">
        <!-- 运营图片上传模块 -->
        <el-upload
            drag
            action="http://localhost:3000/api/v1/common/image/upload"
            method="post"
            name="file"
            list-type="picture"
            :limit="1"
            :on-success="uploadImageSuccess"
            :on-error="uploadImageError"
            :on-remove="uploadImageRemove">
            <el-icon :size="60" style="color: gray;" class="upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
            拖拽图片到此或者 <b>选择图片</b>
            </div>
            <template #tip>
            <div class="el-upload__tip">
                图片类型为jpg/png 
            </div>
            </template>
        </el-upload>
        <!-- 各种表单模块 -->
        <div class="input">
            <span>运营位名称：</span>
            <el-input
                style="width: 200px;"
                v-model="name"
                placeholder="请输入内容"/>
        </div>
        <div class="input">
            <span>运营位描述：</span>
            <el-input
                style="width: 800px;"
                v-model="content"
                placeholder="请输入内容"/>
        </div>
        <div class="input">
            <span>落地页路由：</span>
            <el-input
                style="width: 800px;"
                v-model="uri"
                placeholder="请输入内容"/>
        </div>
        <div class="input">
            <span>运营位状态：</span>
            <el-radio-group v-model="status" size="large">
                <el-radio-button label="禁用" />
                <el-radio-button label="启用" />
            </el-radio-group>
        </div>
        <!-- 上传按钮 -->
        <div class="input">
            <el-button type="primary" :disabled="disableCheak" @click="create">创建运营位</el-button>
        </div>
    </div>
</template>

<style scoped>
.input {
    margin-top: 40px;
}
</style>